<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Agile Lite</title>
		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/ratchet/css/ratchet.min.css">
		<link rel="stylesheet" href="../assets/app/css/app.css">
		<style>
			.custom-ul{ font-size:0;margin:0px;padding:0px;}
			.custom-ul li{display:inline-block;font-size:16px;vertical-align:middle;padding:8px 4px;}
			.custom-li-left{ width:25%;}
			.custom-li-right{ width:75%;}
			.custom-li-right input[type='text'],.custom-li-right input[type='password']{ width:100%; margin-bottom:0px;}
		</style>
	</head>
	<body>
		<div id="section_container">
			<section id="index_section" data-role="section" class="active">
				<header class="bar bar-nav">
				  	<a class="icon icon-left-nav pull-left" data-toggle="back" href="#"></a>
				  	<h1 class="title">Ratchet UI</h1>
				</header>
		
				<article data-role="article" id="ratchet_article" class="active" data-scroll="verticle" style="top:44px;bottom:0px;">
					<div class="scroller">
						<div class="card">
							<ul class="table-view">
								<li class="table-view-cell table-view-divider">Bases</li>
								<li class="table-view-cell"><a class="navigate-right" data-toggle="section" href="#ratchet_layout_section">基本布局</a></li>
							    <li class="table-view-cell"><a class="navigate-right" data-toggle="section" href="ratchet_button_section.html">按钮组件</a></li>
							    <li class="table-view-cell"><a class="navigate-right" data-toggle="section" href="#ratchet_list_section">列表组件</a></li>
							    <li class="table-view-cell table-view-divider">Others</li>
							    <li class="table-view-cell"><a class="navigate-right" data-toggle="section" href="#ratchet_form_section">表单样式</a></li>
							    <li class="table-view-cell"><a class="navigate-right" data-toggle="section" href="#ratchet_icon_section">字体图</a></li>
							</ul>
						</div>
					</div>
				</article>
			</section>
		</div>
		
		<!--- third -->
		<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="../assets/third/iscroll/iscroll-probe.js"></script>
		<script src="../assets/third/arttemplate/template-native.js"></script>
		<!---  agile -->
		<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
		<!-- app -->
		<script type="text/javascript" src="../assets/app/js/app.js"></script>
		<script>
		$('a[data-href]').on(A.options.clickEvent, function(){
			var href = $(this).data('href');
			try{
				NativeUtil.browser(href);
			}catch(e){
				location.href = href;
			}
		});
		</script>
	</body>
</html>